<template>
    <view>
        <view class="header">
            <view class="order-number">订单编号：2324345</view>
            <view class="shopping">
                <view class="shopping-img"></view>
                <view class="shopping-info">
                    <view class="shopping-name">猫山王榴莲</view>
                    <view class="shopping-price">￥132.0</view>
                    <view class="shopping-text">共1件商品，合计￥132.0（含运费）</view>
                </view>
            </view>
        </view>
        <view class="application">
            <view class="application-item" @tap="chooseApplicationtype">
                <view class="item-left">申请类型：</view>
                <view class="item-right">
                    <view v-if="type" style="color:#333">{{type}}</view>
                    <view v-else>点击选择</view>
                    <view class="iconfont icon-xiangyou"></view>
                </view>
            </view>
            <view class="application-item" @tap="chooseCargoStatus">
                <view class="item-left">货物状态：</view>
                <view class="item-right">
                    <view v-if="status" style="color:#333">{{status}}</view>
                    <view v-else>点击选择</view>
                    <view class="iconfont icon-xiangyou"></view>
                </view>
            </view>
            <view class="application-item" @tap="chooseApplicationReason">
                <view class="item-left">申请原因：</view>
                <view class="item-right">
                    <view v-if="reason" style="color:#333">{{reason}}</view>
                    <view v-else>点击选择</view>
                    <view class="iconfont icon-xiangyou"></view>
                </view>
            </view>
            <view class="application-item">
                <view class="item-left">退款金额：</view>
                <view class="item-right drawback">￥132.0</view>
            </view>
            <view class="application-item">
                <view class="item-left">申请说明：</view>
                <view class="upload-img">上传图片</view>
            </view>
        </view>
        <view class="bottom">
            <view class="button">提交申请</view>
        </view>
        <application-type :showType="showType" @close="closeType"></application-type>
        <cargo-status :showStatus="showStatus" @close="closeStatus"></cargo-status>
        <application-reason :showReason="showReason" @close="closeReason"></application-reason>
    </view>
</template>

<script>
import applicationType from '../../components/application-type/application-type'
import cargoStatus from '../../components/cargo-status/cargo-status'
import applicationReason from '../../components/application-reason/application-reason'
export default {
    data() {
        return {
            showType: false,
            showStatus: false,
            showReason: false,
            type: '',
            status: '',
            reason: ''
        }
    },
    components: {
        applicationType,
        cargoStatus,
        applicationReason
    },
    methods: {
        chooseApplicationtype() {
            // console.log(123)
            this.showType = true
            // console.log(this.showType)
        },
        closeType(data) {
            this.showType = false
            console.log(data)
            this.type = data
        },
        chooseCargoStatus() {
            this.showStatus = true
        },
        closeStatus(data) {
            this.showStatus = false;
            this.status = data
        },
        chooseApplicationReason() {
            this.showReason = true
        },
        closeReason(data) {
            this.showReason = false;
            this.reason = data
        }
    }
}
</script>

<style>
    .header {
        background: #ffffff;
        margin-top: 20rpx;
    }
    .order-number {
        color: #333333;
        font-size: 24rpx;
        font-weight: 500;
        padding: 15rpx 0 30rpx 58rpx;
    }
    .shopping {
        padding: 0rpx 0 20rpx 58rpx;
        display: flex;
        justify-content: left;
    }
    .shopping-img {
        width: 139rpx;
        height: 139rpx;
        border: 1rpx solid #ccc;
    }
    .shopping-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 23rpx;
    }
    .shopping-name {
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
    }
    .shopping-price {
        color: #FF1E1E;
        font-size: 30rpx;
    }
    .shopping-text {
        color: #999999;
        font-size: 24rpx;
    }
    .application {
        margin-top: 20rpx;
        padding: 42rpx 49rpx 88rpx 40rpx;
        background: #ffffff;
    }
    .application-item {
        height: 113rpx;
        display: flex;
        justify-content: space-between;
    }
    .application-item:last-child {
        height: 100%;
        display: block;
    }
    .item-left {
        width: 40%;
        color: #333333;
        font-size: 28rpx;
        font-weight: 500;
    }
    .item-right {
        width: 60%;
        display: flex;
        justify-content: space-between;
        color: #999999;
        font-size: 28rpx;
    }
    .drawback {
        color: #FF1E1E;
        font-size: 30rpx;
        font-weight: bold;
    }
    .upload-img {
        width: 133rpx;
        height: 133rpx;
        background:rgba(245,245,245,1);
        border-radius: 10rpx;
        margin-top: 60rpx;
        color: #999999;
        text-align: center;
        line-height: 132rpx;
        font-size: 24rpx;
    }
    .bottom {
        position: fixed;
        bottom: 0rpx;
        width: 100%;
        height: 140rpx;
        background: #ffffff;
        box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.1);
    }
    .button {
        width: 473rpx;
        height: 84rpx;
        background:rgba(36,199,156,1);
        border-radius: 42rpx;
        margin: 28rpx auto 0rpx;
        color: #ffffff;
        font-size: 30rpx;
        font-weight: bold;
        text-align: center;
        line-height: 84rpx;
    }
</style>